<template>
  <div class="search">
    <div class="top">
      <SearchBox :isShow="isShowShowList" class="search-box" :inner-text="hotData.defaultKeyword.keyword" :type="'input'"
        @getWords="getWords" @toSearchPage="toSearchPage" @reset="reset">
      </SearchBox>
    </div>

    <!-- 历史记录 -->
    <div ref="history" class="center" v-show="isShowSearchList === false && isShowShowList === false && isHistoryShow">
      <div class="header">
        <h3 class="title">历史记录</h3>
        <van-icon name="delete-o" color="#717171" size="20" @click="removeHistory" />
      </div>
      <div class="history-list">
        <van-tag plain class="tag" text-color="black" size="large" v-for="tag in historyList"
          @click="toSearchPage(tag)">{{ tag }}</van-tag>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="bottom" v-show="isShowSearchList === false && isShowShowList === false">
      <div class="header">
        <h3 class="title">热门搜索</h3>
      </div>
      <div class="search-list">
        <van-tag class="tag" :class="{ firstTag: tag.highlight === 1 }" plain size="large"
          v-for="tag in hotData.hotKeywordVOList" @click="toSearchPage(tag.keyword)">{{
            tag.keyword }}</van-tag>
      </div>
    </div>

    <!-- 搜索页面-关键词 -->
    <div class="search-list" v-if="isShowSearchList && isShowShowList === false">
      <div class="search-word" v-for="word in searchList" @click="toSearchPage(word)">
        <div class="word">{{ word }}</div>
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 搜索页面-搜索结果 -->
    <div class="search-result" v-show="isShowShowList">
      <van-dropdown-menu class="result-sort" active-color="#ee0a24">
        <van-dropdown-item title="综合" overlay="false"></van-dropdown-item>
        <van-dropdown-item title="价格">
          <div class="line-top">
            <div class="line">
              <div class="left">筛选</div>
              <div class="right">
                <input type="text" placeholder="最低价" class="input low">
                <span class="text-center">—</span>
                <input type="text" placeholder="最高价" class="input high">
              </div>
            </div>
            <div class="line">
              <div class="left">排序</div>
              <div class="right">
                <van-tag class="sort-tag" plain size="large">从低到高</van-tag>
                <van-tag class="sort-tag" plain size="large">从高到低</van-tag>
              </div>
            </div>
          </div>
          <div class="line-bottom">
            <div class="method">取消</div>
            <div class="method">确定</div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="分类" class="divide">
          <div class="divide-context">
            <van-tag plain class="depart-tag" v-for="tag in categoryList" size="large">{{ tag.name }}</van-tag>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="result-context">
        <div class="info" v-for="item in searchData" :key="item.id">
          <div class="img">
            <img class="poster" v-lazy="item.listPicUrl" :src="item.listPicUrl" alt="">
            <img class="logo" :style="`width:${item.topLogo.width / 2}px;height:${item.topLogo.height / 2}px`"
              :src="item.topLogo.logoUrl" alt="">
          </div>
          <div class="title">
            <!-- logo需要循环 -->
            <img v-for="tagLogo in item.preLogo" :style="`width:${tagLogo.width / 2}px;height:${tagLogo.height / 2}px`"
              class="logo" :src="tagLogo.logoUrl" alt="">
            {{ item.name }}
          </div>
          <span class="discounts" v-for="tag in item.itemTagList">
            <img class="logo" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
            {{ tag.name }}
          </span>
          <div class="price">
            <span class="preFix red">
              {{ item.finalPriceInfoVO.priceInfo.finalPrice?.prefix }}
            </span>
            <span class="price red">
              <span class="sybol">￥</span>
              <span>{{ item.finalPriceInfoVO.priceInfo.finalPrice?.price }}{{ item.finalPriceInfoVO.priceInfo.basicPrice
              }}</span>
            </span>
            <span class="before-price">￥{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
          </div>
          <div class="finalTag" v-show="item.finalPriceInfoVO.banner !== null">
            <span class="title">
              {{ item.finalPriceInfoVO.banner?.title }}
              <!-- {{ (item.finalPriceInfoVO.banner.price)?.prefix }}{{ (item.finalPriceInfoVO.banner.price)?.price }} -->
            </span>
            {{ item.finalPriceInfoVO.banner?.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  name: 'Search'
})
</script>
<script lang="ts" setup>
import { ref, toRefs } from 'vue'
import { storeToRefs } from 'pinia';
import SearchBox from '@/components/searchBox/index.vue'
import { searchDataStore } from '@/stores/search'
import { debounce } from 'lodash'
// 数据源获取
const searchStore = searchDataStore()
const { hotData, searchList, searchData, categoryList } = storeToRefs(searchStore)
const router = useRouter()
// 页面显示 初始化/搜索 isShow 决定动态列表是否展示
const isShowSearchList = ref(false)
// 展示搜索页面是否展示
const isShowShowList = ref(false)
// 展示是否显示历史记录页
const isHistoryShow = ref(JSON.parse(localStorage.getItem('history-list') as any)?.length > 0 as boolean)
// 页面显示，初始化历史记录
const historyList = ref<string[]>(JSON.parse(localStorage.getItem('history-list') as any) || [])
onMounted(() => {
  searchStore.getKeywordAndHot()
  // 是否展示搜索页面
  if (router.currentRoute.value.fullPath.includes('keyword')) {
    initSearchResult('')
  }

})
// 初始化搜索结果
const initSearchResult = (word: string) => {
  isShowShowList.value = true
  let queryWord = router.currentRoute.value.query.keyword
  let keyword = word || queryWord
  searchStore.getSearchInfo(keyword as string)
}
// 点击重置逻辑
const reset = () => {

  isShowShowList.value = false
  isShowSearchList.value = false
  isHistoryShow.value = true
  getWords('')
}
// 点击事件 添加历史记录

const addLocalStorage = (keyword: string) => {
  isHistoryShow.value = true
  // 原本数据删除
  let index = historyList.value.indexOf(keyword)
  if (index > -1) {
    historyList.value.splice(index, 1)
  }
  // 头插
  historyList.value.unshift(keyword)
  localStorage.setItem('history-list', JSON.stringify(historyList.value))

}

// 点击事件 删除历史记录 整体
const history = ref()
const removeHistory = () => {
  // 删除元素
  isHistoryShow.value = false
  // 删除历史记录
  localStorage.removeItem('history-list')
  // console.log('查看是否删除localstorage');
  historyList.value = []
}

// 调用查询动态数据
const getWords = debounce((value: any) => {
  isShowShowList.value = false
  isHistoryShow.value = true
  isShowSearchList.value = true
  if (value === '' || value.trim() === '') {
    isShowSearchList.value = false
    return
  }
  searchStore.getSearchList(value)
}, 500)



// 搜索内容页面 SearchPage

const toSearchPage = (word: string) => {
  // console.log('点击需要跳转的页面', word);
  if (word)
    router.push(`/search?keyword=${word}`)
  isShowShowList.value = true
  isShowSearchList.value = false
  initSearchResult(word)
  addLocalStorage(word)
}

// 排序渲染数据

</script>

<style lang="less" scoped>
.search {
  height: 100%;
  background-color: #eeeeee;



  .top {
    background-color: white;
    height: 44px;
    display: flex;
    padding: 0 .3rem;
    align-items: center;
    border-bottom: solid 1px #fbfbfb;
    position: sticky;
    top: 0;
    z-index: 999;

    .search-box {
      justify-content: flex-start;
    }

    .backToPrev {
      font-size: .38rem;
      margin-left: .3rem;
      width: 50px;
      text-align: center;
    }
  }

  .center {
    background-color: white;
    padding: 0 .3rem .3rem;
    margin-bottom: 20px;

    .header {
      display: flex;
      justify-content: space-between;
      height: 45px;
      align-items: center;

      .title {
        font-weight: 400;
        color: grey
      }
    }

    .history-list {
      margin: 0 .3rem 0 .3rem;

      .tag {
        margin-right: 15px;
        text-align: center;
        margin-bottom: 15px;
        color: black;

      }
    }
  }

  .bottom {
    padding: 0 .3rem .3rem;
    background-color: white;

    .header {
      height: 45px;
      line-height: 45px;
      font-weight: 400;
      color: grey;
    }

    .search-list {
      .tag {
        margin-right: 15px;
        text-align: center;
        margin-bottom: 15px;
        color: black;

        &.firstTag {
          color: red;
        }
      }
    }
  }

  .search-list {
    background-color: white;
    padding: 0 .3rem 0 .3rem;

    .search-word {
      border-bottom: solid #7f7f7f 1px;
      display: flex;
      justify-content: space-between;
      height: 50px;
      align-items: center;
      font-size: 14px;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .search-result {

    :deep(.result-sort) {
      display: flex;
      height: 40px;
      align-items: center;
      position: sticky;
      top: 46px;
      z-index: 999;
      width: 100%;

      .van-dropdown-menu__item {
        width: calc(100vw / 3);
        text-align: center;
        background-color: #fafafa;
        font-size: 17px;
        line-height: 40px;
      }

      .van-dropdown-item__content {
        .line-top {
          display: flex;
          flex-direction: column;
          padding: 20px 20px 0 20px;
        }

        .line-bottom {
          display: flex;
          border-top: solid 1px grey;

          .method {
            width: 50%;
            text-align: center;
            height: 50px;
            line-height: 50px;
            font-size: 14px;

            &:first-child {
              border-right: solid 1px grey;
            }

            &:nth-child(2) {
              color: red;
            }
          }
        }

        .line {
          height: 55px;
          display: flex;
          align-items: center;

          .left {
            font-size: 14px;
            width: 30px;
            margin-right: 20px;
          }

          .right {
            flex: 1;
            font-size: 14px;

            .input {
              width: 115px;
              line-height: 100%;
              text-align: center;
            }

            .text-center {
              margin: 0 10px;
              font-size: 18px;
            }

            //mark
            .sort-tag {
              padding: 5px 10px;
              margin-right: 10px;
            }
          }
        }
      }

      .depart-tag {
        padding: 5px;
        margin-right: 10px;
      }

      .divide-context {
        padding: 20px;
      }
    }

    .result-context {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
      background: white;

      .info {
        width: calc((100vw - 60px)/2);
        background: white;
        padding: 10px;

        .img {
          width: 100%;
          position: relative;

          .poster {
            width: 100%;
          }

          .logo {
            position: absolute;
            top: 5px;
            right: 5px;
          }
        }

        .title {
          // display: flex;
          // height: 20px;
          line-height: 20px;
          // align-items: center;
          font-size: 14px;


          .logo {
            margin-right: 5px;
          }
        }

        .discounts {
          font-size: 12px;
          border-radius: 10px;
          border: solid 1px #777;

          .logo {
            width: 10px;
            height: 10px;
          }
        }

        .price {
          font-size: 12px;
          color: red;

          .preFix {}

          .price {
            font-size: 23px;

            .sybol {
              font-size: 12px;
            }
          }

          .before-price {
            color: gray;
            text-decoration: line-through;
          }
        }

        .finalTag {
          font-size: 12px;
          display: flex;
          height: 24px;
          align-items: center;
          background-color: #ffe9eb;
          border-radius: 12px;
          color: #fb1e32;
          font-weight: bold;

          .title {
            background-color: #fa1e32;
            color: white;
            font-weight: bold;
            padding: 0 5px;
            border-radius: 12px;
            margin-right: 5px;
          }
        }

      }
    }
  }
}
</style>
